﻿<%@ Page Title="" Language="C#" MasterPageFile="~/YUIAspNet.Master" AutoEventWireup="true" CodeBehind="CustomFormat.aspx.cs" Inherits="YUIAspNetDemo.AutoComplete.CustomFormat" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>YUIAsp.Net Controls : LiveDemo : AutoComplete : Custom format</title>
    <style type="text/css">
         /* Customize the height of the results container */
        .myAutoComplete div.yui-ac-content {height:200px; overflow:auto}
    </style>
    <script type="text/javascript">
        function FormatResults(sender, args) { 
            var resultCompleted = args.match.substring(args.query.length);
            args.display = "<span style='background-color:#CCCCCC'>"
                + args.query
                + "</span>"
                + resultCompleted + "<br />&nbsp;&nbsp;&nbsp;&nbsp;" + args.data[1];
        }
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <h1>AutoComplete custom format</h1>
    
    <p>This example of using the YUIAsp.Net AutoComplete control uses the same data source as the <a href="AutoComplete_RemoteData.aspx">Remote data</a> example.</p>
    
    <p>This time, a custom formatter is applied to the results. Besides the EnglishName of the Culture, also the NativeName is displayed for an item. Also, the text matched in the search is now highlighted.</p>
    
    <p>Another thing to notice here is that the results box has a scrollbar. By default, the results box will have a height big enough to display all the results. In most cases, that's enough. But when you'll want to have a scrollbar, just use css to make the container have a fixed height.</p>
            
    <p>You can customize the appearence of items in autocomplete by specifying a handler for the OnClientCustomFormat handler.</p>
    
    <p><yui:AutoComplete ID="autoComplete" CssClass="myAutoComplete" runat="server" Width="240px" OnClientCustomFormat="FormatResults"></yui:AutoComplete></p>
    
    <br /><br /><br />
</asp:Content>
